<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="846px"
      :title="model.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body" v-loading="formLoading">
        <a-row :gutter="0">
          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <a-col :span="12">
              <!-- 租户编码 -->
              <a-form-model-item
                ref="tenantCode"
                label="租户编码"
                prop="tenantCode"
              >
                <a-input
                  v-model="form.tenantCode"
                  placeholder="请输入租户编码"
                  :maxLength="40"
                  :disabled="model.id ? true : false"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 租户名称 -->
              <a-form-model-item
                ref="tenantName"
                label="租户名称"
                prop="tenantName"
              >
                <a-input
                  v-model="form.tenantName"
                  placeholder="请输入租户名称"
                  :maxLength="200"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 租户类型 -->
              <a-form-model-item
                ref="tenantTypeValue"
                label="租户类型"
                prop="tenantTypeValue"
              >
                <a-select
                  :getPopupContainer="selectContainer"
                  v-model="form.tenantTypeValue"
                  :loading="tenantTypeLoading"
                  placeholder="请选择租户类型"
                  @change="tenantTypeChange"
                >
                  <a-select-option
                    :value="item.dicValue"
                    v-for="(item, index) in tenantTypeSource"
                    :key="index"
                  >
                    {{ item.dicDesc }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <!-- 超管账号 -->
              <a-form-model-item
                ref="tenantSuperAccount"
                label="超管账号"
                prop="tenantSuperAccount"
              >
                <a-select
                  :getPopupContainer="selectContainer"
                  v-model="form.tenantSuperAccount"
                  placeholder="请选择超管账号"
                  :loading="superTenantLoading"
                  allowClear
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item, index) in superTenantSource"
                    :key="index"
                  >
                    {{ item.userName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 排序 -->
            <a-col :span="24">
              <a-form-model-item ref="sort" label="排序" prop="sort">
                <a-input
                  v-model="form.sort"
                  type="number"
                  placeholder="请输入排序"
                  :maxLength="11"
                />
              </a-form-model-item>
            </a-col>
            <!-- 租户类型为项目时，以下字段开始填写 -->
            <template v-if="form.tenantTypeValue == 3">
              <a-col :span="24">
                <!-- 项目编码 -->
                <a-form-model-item
                  ref="proCode"
                  label="项目编码"
                  prop="proCode"
                >
                  <a-input
                    v-model="form.proCode"
                    placeholder="请输入项目编码"
                    :maxLength="20"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <!-- 项目名称 -->
                <a-form-model-item
                  ref="proName"
                  label="项目名称"
                  prop="proName"
                >
                  <a-input
                    v-model="form.proName"
                    placeholder="请输入项目名称"
                    :maxLength="255"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <!--项目所在地 -->
                <a-form-model-item
                  ref="provinceCode"
                  label="项目所在地"
                  prop="provinceCode"
                >
                  <a-row :gutter="20">
                    <a-col :span="8">
                      <a-select
                        :getPopupContainer="selectContainer"
                        v-model="form.provinceCode"
                        placeholder="请选择省份"
                        @change="provinceChange"
                      >
                        <a-select-option
                          :value="item.code"
                          v-for="(item, index) in provinceSource"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                    <a-col :span="8">
                      <a-select
                        :getPopupContainer="selectContainer"
                        v-model="form.cityCode"
                        placeholder="请选择城市"
                        @change="cityChange"
                      >
                        <a-select-option
                          :value="item.code"
                          v-for="(item, index) in citySource"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                    <a-col :span="8">
                      <a-select
                        :getPopupContainer="selectContainer"
                        v-model="form.areaCode"
                        placeholder="请选择区县"
                      >
                        <a-select-option
                          :value="item.code"
                          v-for="(item, index) in areaSource"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--开工日期 -->
                <a-form-model-item
                  ref="startDateStr"
                  label="开工日期"
                  prop="startDateStr"
                >
                  <a-date-picker
                    :getCalendarContainer="selectContainer"
                    style="width: 100%"
                    v-model="form.startDateStr"
                    format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD"
                    placeholder="请选择开工日期"
                    :disabled-date="disabledStartDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--完工日期 -->
                <a-form-model-item
                  ref="endDateStr"
                  label="完工日期"
                  prop="endDateStr"
                >
                  <a-date-picker
                    :getCalendarContainer="selectContainer"
                    style="width: 100%"
                    v-model="form.endDateStr"
                    format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD"
                    placeholder="请选择完工日期"
                    :disabled-date="disabledEndDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--项目类型 -->
                <a-form-model-item
                  ref="proType"
                  label="项目类型"
                  prop="proType"
                >
                  <a-select
                    :getPopupContainer="selectContainer"
                    v-model="form.proType"
                    placeholder="请选择项目类型"
                    :loading="projectTypeLoading"
                  >
                    <a-select-option
                      :value="item.dicValue"
                      v-for="(item, index) in projectTypeSource"
                      :key="index"
                    >
                      {{ item.dicDesc }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--工程类型 -->
                <a-form-model-item
                  ref="engType"
                  label="工程类型"
                  prop="engType"
                >
                  <a-select
                    :getPopupContainer="selectContainer"
                    v-model="form.engType"
                    placeholder="请选择工程类型"
                    :loading="engTypeLoading"
                  >
                    <a-select-option
                      :value="item.dicValue"
                      v-for="(item, index) in engTypeSource"
                      :key="index"
                    >
                      {{ item.dicDesc }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--公路类型 -->
                <a-form-model-item
                  ref="roadType"
                  label="公路类型"
                  prop="roadType"
                >
                  <a-select
                    :getPopupContainer="selectContainer"
                    v-model="form.roadType"
                    placeholder="请选择公路类型"
                    :loading="highwayTypeLoading"
                    allowClear
                  >
                    <a-select-option
                      :value="item.dicValue"
                      v-for="(item, index) in highwayTypeSource"
                      :key="index"
                    >
                      {{ item.dicDesc }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--道路等级 -->
                <a-form-model-item
                  ref="roadGrade"
                  label="道路等级"
                  prop="roadGrade"
                >
                  <a-select
                    :getPopupContainer="selectContainer"
                    v-model="form.roadGrade"
                    placeholder="请选择道路等级"
                    :loading="roadGradeLoading"
                    allowClear
                  >
                    <a-select-option
                      :value="item.dicValue"
                      v-for="(item, index) in roadGradeSource"
                      :key="index"
                    >
                      {{ item.dicDesc }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--建设里程 -->
                <a-form-model-item ref="roadKm" label="建设里程" prop="roadKm">
                  <a-input
                    v-model="form.roadKm"
                    placeholder="请输入建设里程"
                    :maxLength="15"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--投资规模 -->
                <a-form-model-item
                  ref="roadMoney"
                  label="投资规模"
                  prop="roadMoney"
                >
                  <a-input
                    v-model="form.roadMoney"
                    placeholder="请输入投资规模"
                    :maxLength="14"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <!--经纬度坐标 -->
                <a-form-model-item ref="geox" label="经纬度坐标" prop="geox">
                  <a-row :gutter="20">
                    <a-col :span="12">
                      <a-input
                        v-model="form.geox"
                        disabled
                        placeholder="请选择经纬度坐标"
                      ></a-input>
                    </a-col>
                    <a-col :span="12">
                      <a-input
                        v-model="form.geoy"
                        disabled
                        placeholder="请选择经纬度坐标"
                      ></a-input>
                    </a-col>
                  </a-row>
                  <div class="map-container">
                    <div id="project-map"></div>
                    <div class="search-wrap">
                      <a-radio-group name="radioGroup" v-model="map.type">
                        <a-radio :value="1">按关键字搜索</a-radio>
                        <a-radio :value="2">按坐标搜索</a-radio>
                      </a-radio-group>
                      <div class="input-container">
                        <div class="input-body">
                          <a-input
                            v-if="map.type == 1"
                            placeholder="关键字搜索"
                            v-model="map.keyWord"
                          />
                          <template v-if="map.type == 2">
                            <a-input
                              placeholder="请输入经度"
                              v-model="map.geox"
                            />
                            <div style="line-height: 30px">,</div>
                            <a-input
                              placeholder="请输入纬度"
                              v-model="map.geoy"
                            />
                          </template>
                        </div>
                        <div class="search" @click="serachMap">
                          <a-icon
                            type="search"
                            :style="{
                              fontSize: '20px',
                              color: '#fff',
                            }"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <!--项目简介 -->
                <a-form-model-item
                  ref="introduction"
                  label="项目简介"
                  prop="introduction"
                >
                  <a-input
                    v-model="form.introduction"
                    placeholder="请输入项目简介"
                    type="textarea"
                    style="height: 100px"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <!--包含系统 -->
                <a-form-model-item
                  ref="includeSystem"
                  label="包含系统"
                  prop="includeSystem"
                >
                  <a-select
                    v-model="form.includeSystem"
                    placeholder="请选择包含系统"
                    mode="multiple"
                    :getPopupContainer="selectContainer"
                  >
                    <a-select-option
                      :value="item.systemCode"
                      v-for="(item, index) in includeSystemSource"
                      :key="index"
                    >
                      {{ item.systemName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--项目负责人 -->
                <a-form-model-item
                  ref="contacts"
                  label="项目负责人"
                  prop="contacts"
                >
                  <a-input
                    v-model="form.contacts"
                    placeholder="请输入项目负责人"
                    :maxLength="50"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <!--手机号 -->
                <a-form-model-item
                  ref="contactsPhone"
                  label="手机号"
                  prop="contactsPhone"
                >
                  <a-input
                    v-model="form.contactsPhone"
                    placeholder="请输入手机号"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <!--项目图片 -->
                <a-form-model-item label="项目图片">
                  <div class="picture-img">
                    <div
                      class="card"
                      v-for="(item, index) in imgs"
                      :key="index"
                    >
                      <div class="colse">
                        <a-icon
                          type="close-circle"
                          class="del-icon"
                          theme="filled"
                          @click="deleteImg(item, index)"
                        />
                      </div>
                      <img
                        class="card-img"
                        :src="item.url"
                        @click.stop="previewImg(item)"
                      />
                    </div>
                    <a-upload
                      v-if="imgs.length == 0"
                      accept="image/*"
                      list-type="picture-card"
                      :file-list="picList"
                      :beforeUpload="
                        (file) => {
                          return beforeUploadPic(file);
                        }
                      "
                    >
                      <a-icon type="plus" />
                    </a-upload>
                  </div>
                </a-form-model-item>
              </a-col>
            </template>
          </a-form-model>
        </a-row>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="loading" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-modal>
    <!-- 预览图片 -->
    <PreviewModel :visible.sync="previewModalVisible" :imgUrl="imagePath">
    </PreviewModel>
  </div>
</template>

<script>
import PreviewModel from "@/components/PreviewModel";
import moment from "moment";
import areaData from "@/data/area-json.js";
import { getDictList } from "@/api/user-center/organizationManage.js";
import { notificationTip, getProInitGeo } from "@/utils";
import {
  getIncludeSystem,
  userCenterFile,
  getTenantManageAdd,
  getSuperTenant,
  getTenantDetails,
} from "@/api/user-center/tenantManage.js";
let mapInstance = null;
//【新增子节点】
export default {
  name: "addProjectNodeModal",
  components: {
    PreviewModel,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getAllData();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      //预览图片
      previewModalVisible: false,
      imagePath: "",
      loading: false,
      form: {
        //租户编码
        tenantCode: "",
        //租户名称
        tenantName: "",
        //租户类型
        tenantTypeValue: undefined,
        //超管账号
        tenantSuperAccount: undefined,
        //项目编码
        proCode: "",
        //项目名称
        proName: "",
        //项目所在地
        provinceCode: undefined,
        cityCode: undefined,
        areaCode: undefined,
        //开工日期
        startDateStr: "",
        //完工日期
        endDateStr: "",
        //项目类型
        proType: undefined,
        //工程类型
        engType: undefined,
        //公路类型
        roadType: undefined,
        //道路等级
        roadGrade: undefined,
        //建设里程
        roadKm: "",
        //投资规模
        roadMoney: "",
        //X坐标
        geox: "",
        //Y坐标
        geoy: "",
        //项目简介
        introduction: "",
        //包含系统
        includeSystem: undefined,
        //项目负责人
        contacts: "",
        //手机号
        contactsPhone: "",
        //项目图片
        proImage: "",
        //排序
        sort: "",
      },
      formLoading: false,
      rules: {
        tenantCode: [
          { required: true, message: "请输入租户编码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]+$/,
            message: "只能输入英文字母，数字，下划线，中划线",
          },
        ],
        tenantName: [
          { required: true, message: "请输入租户名称", trigger: "blur" },
        ],
        tenantTypeValue: [
          { required: true, message: "请选择租户类型", trigger: "change" },
        ],
        proCode: [
          { required: true, message: "请输入项目编码", trigger: "blur" },
        ],
        proName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        provinceCode: [
          { required: true, message: "请选择项目所在地", trigger: "change" },
        ],
        startDateStr: [
          { required: true, message: "请选择开工日期", trigger: "change" },
        ],
        endDateStr: [
          { required: true, message: "请选择完工日期", trigger: "change" },
        ],
        proType: [
          { required: true, message: "请选择项目类型", trigger: "change" },
        ],
        engType: [
          { required: true, message: "请选择工程类型", trigger: "change" },
        ],
        roadKm: [
          { required: true, message: "请输入建设里程", trigger: "blur" },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正确的建设里程，可保留三位小数",
          },
        ],
        roadMoney: [
          { required: true, message: "请输入投资规模", trigger: "blur" },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正确的投资规模，可保留两位小数",
          },
        ],
        includeSystem: [
          { required: true, message: "请选择包含系统", trigger: "change" },
        ],
        contactsPhone: [
          { required: false },
          {
            pattern: /^1[0-9]{10}$/,
            message: "请输入正确的手机号",
          },
        ],
        sort: [{ required: true, message: "请输入排序" }],
      },
      //地图
      map: {
        type: 1,
        keyWord: "",
        geox: "",
        geoy: "",
        marker: null,
      },
      //超管账号下拉框
      superTenantSource: [],
      superTenantLoading: false,
      //租户类型
      tenantTypeSource: [],
      tenantTypeLoading: false,
      //项目类型
      projectTypeSource: [],
      projectTypeLoading: false,
      //工程类型
      engTypeSource: [],
      engTypeLoading: false,
      //公路类型
      highwayTypeSource: [],
      highwayTypeLoading: false,
      //道路等级
      roadGradeSource: [],
      roadGradeLoading: false,
      //包含系统
      includeSystemSource: [],
      //项目图片
      imgs: [],
      picList: [],
      //省市区
      provinceSource: areaData,
      citySource: [],
      areaSource: [],
    };
  },
  mounted() {},
  methods: {
    selectContainer(triggerNode) {
      return triggerNode.parentNode;
    },
    //详情
    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getTenantDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          let provCode = result?.sysProject?.provinceCode || "";
          let cityCode = result?.sysProject?.cityCode || "";
          let areaCode = result?.sysProject?.areaCode || "";
          this.citySource =
            this.provinceSource.find((item) => item.code == provCode)
              ?.children || [];
          this.areaSource =
            this.citySource.find((item) => item.code == cityCode)?.children ||
            [];
          this.form = {
            //租户名称
            tenantName: result.tenantName,
            //租户编码
            tenantCode: result.tenantCode,
            //租户类型
            tenantTypeValue: Number(result.tenantTypeValue),
            //超管账号
            tenantSuperAccount: result.tenantSuperAccount
              ? result.tenantSuperAccount
              : undefined,
            //排序
            sort: result.sort,
            //项目编码
            proCode: result?.sysProject?.proCode || "",
            //项目名称
            proName: result?.sysProject?.proName || "",
            //项目所在地
            provinceCode: provCode ? provCode.toString() : undefined,
            cityCode: cityCode ? cityCode.toString() : undefined,
            areaCode: areaCode ? areaCode.toString() : undefined,
            //开工日期
            startDateStr: result?.sysProject?.startDateStr || "",
            //完工日期
            endDateStr: result?.sysProject?.endDateStr || "",
            //项目类型
            proType: result?.sysProject?.proType || undefined,
            //工程类型
            engType: Number(result?.sysProject?.engType) || undefined,
            //公路类型
            roadType: result?.sysProject?.roadType || undefined,
            //道路等级
            roadGrade: result?.sysProject?.roadGrade || undefined,
            //建设里程
            roadKm: result?.sysProject?.roadKm || "",
            //投资规模
            roadMoney: result?.sysProject?.roadMoney || "",
            //X坐标
            geox: result?.sysProject?.geox || "",
            //Y坐标
            geoy: result?.sysProject?.geoy || "",
            //项目简介
            introduction: result?.sysProject?.introduction || "",
            //包含系统
            includeSystem:
              result?.sysProject?.includeSystem.split(",") || undefined,
            //项目负责人
            contacts: result?.sysProject?.contacts || "",
            //手机号
            contactsPhone: result?.sysProject?.contactsPhone || "",
            //项目图片
            proImage: result?.sysProject?.proImage,
            id: result?.sysProject?.id,
          };

          this.imgs = [];
          this.imgs.push({
            url: result?.sysProject?.filepath,
          });
        })
        .catch((_) => {})
        .finally((_) => {
          if (this.form.tenantTypeValue == 3) {
            setTimeout(() => {
              this.$nextTick(() => {
                this.initMap(this.form?.geox, this.form?.geoy);
              });
            }, 500);
          }
          this.formLoading = false;
        });
    },

    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id, text, parentTenantCode } = this.model;
          let formJson = {
            //租户名称
            tenantName: form.tenantName,
            //租户编码
            tenantCode: form.tenantCode,
            //租户类型
            tenantTypeValue: form.tenantTypeValue,
            //超管账号
            tenantSuperAccount: form.tenantSuperAccount
              ? form.tenantSuperAccount
              : "",
            //排序
            sort: form.sort,
            sysProject: {
              //项目编码
              proCode: form.proCode,
              //项目名称
              proName: form.proName,
              //项目所在地
              provinceCode: form.provinceCode ? form.provinceCode : "",
              cityCode: form.cityCode ? form.cityCode : "",
              areaCode: form.areaCode ? form.areaCode : "",
              //开工日期
              startDateStr: form.startDateStr,
              //完工日期
              endDateStr: form.endDateStr,
              //项目类型
              proType: form.proType ? form.proType : "",
              //工程类型
              engType: form.engType ? form.engType : "",
              //公路类型
              roadType: form.roadType ? form.roadType : "",
              //道路等级
              roadGrade: form.roadGrade ? form.roadGrade : "",
              //建设里程
              roadKm: form.roadKm,
              //投资规模
              roadMoney: form.roadMoney,
              //X坐标
              geox: form.geox,
              //Y坐标
              geoy: form.geoy,
              //项目简介
              introduction: form.introduction,
              //包含系统
              includeSystem: form.includeSystem
                ? form.includeSystem.toString()
                : "",
              //项目负责人
              contacts: form.contacts,
              //手机号
              contactsPhone: form.contactsPhone,
              //项目图片
              proImage: form.proImage,
            },
          };
          //编辑
          if (id) {
            formJson.id = id;
            formJson.sysProject.id = form.id;
          }
          //子节点
          if (parentTenantCode) {
            formJson.parentTenantCode = parentTenantCode;
          }
          getTenantManageAdd(formJson)
            .then((res) => {
              notificationTip("success", text + "成功！");
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },
    //查询所有下拉框
    getAllData() {
      this.getTenantTypeList();
      this.getSuperTenantList();
      this.getProjectTypeList();
      this.getEngTypeList();
      this.getHighwayTypeList();
      this.getRoadGradeList();
      this.getIncludeSystemList();
    },
    //查询租户类型
    getTenantTypeList() {
      this.tenantTypeLoading = true;
      getDictList({ dictKey: "tenantType" })
        .then((res) => {
          let { data } = res;
          this.tenantTypeSource = data.result || [];
        })
        .catch((_) => {
          this.tenantTypeSource = [];
        })
        .finally((_) => {
          this.tenantTypeLoading = false;
        });
    },
    //查询超管账号下拉框
    getSuperTenantList() {
      this.superTenantLoading = true;
      getSuperTenant("")
        .then((res) => {
          let { data } = res;
          this.superTenantSource = data.result || [];
        })
        .catch((_) => {
          this.superTenantSource = [];
        })
        .finally((_) => {
          this.superTenantLoading = false;
        });
    },
    //查询项目类型
    getProjectTypeList() {
      this.projectTypeLoading = true;
      getDictList({ dictKey: "projectType" })
        .then((res) => {
          let { data } = res;
          this.projectTypeSource = data.result || [];
        })
        .catch((_) => {
          this.projectTypeSource = [];
        })
        .finally((_) => {
          this.projectTypeLoading = false;
        });
    },
    //查询工程类型
    getEngTypeList() {
      this.engTypeLoading = true;
      getDictList({ dictKey: "engineeringType" })
        .then((res) => {
          let { data } = res;
          this.engTypeSource = data.result || [];
        })
        .catch((_) => {
          this.engTypeSource = [];
        })
        .finally((_) => {
          this.engTypeLoading = false;
        });
    },
    //查询公路类型
    getHighwayTypeList() {
      this.highwayTypeLoading = true;
      getDictList({ dictKey: "roadType" })
        .then((res) => {
          let { data } = res;
          this.highwayTypeSource = data.result || [];
        })
        .catch((_) => {
          this.highwayTypeSource = [];
        })
        .finally((_) => {
          this.highwayTypeLoading = false;
        });
    },
    //查询道路等级
    getRoadGradeList() {
      this.roadGradeLoading = true;
      getDictList({ dictKey: "roadGrade" })
        .then((res) => {
          let { data } = res;
          this.roadGradeSource = data.result || [];
        })
        .catch((_) => {
          this.roadGradeSource = [];
        })
        .finally((_) => {
          this.roadGradeLoading = false;
        });
    },
    //查询包含系统
    getIncludeSystemList() {
      getIncludeSystem()
        .then((res) => {
          let { data } = res;
          this.includeSystemSource = data.result || [];
        })
        .catch((_) => {
          this.includeSystemSource = [];
        });
    },
    //选择租户类型
    tenantTypeChange(ev) {
      //重置项目表单字段
      this.form.proCode = "";
      this.form.proName = "";
      this.form.provinceCode = undefined;
      this.form.cityCode = undefined;
      this.form.areaCode = undefined;
      this.form.startDateStr = "";
      this.form.endDateStr = "";
      this.form.proType = undefined;
      this.form.engType = undefined;
      this.form.roadType = undefined;
      this.form.roadGrade = undefined;
      this.form.roadKm = "";
      this.form.roadMoney = "";
      this.form.geox = "";
      this.form.geoy = "";
      this.form.includeSystem = undefined;
      this.form.contacts = "";
      this.form.contactsPhone = "";
      this.form.proImage = "";
      this.imgs = [];
      if (ev == 3) {
        this.$nextTick(() => {
          this.initMap();
        });
      }
    },

    //选择省
    provinceChange(e) {
      this.form.cityCode = undefined;
      this.form.areaCode = undefined;
      this.form.areaCode = [];
      this.citySource =
        this.provinceSource.find((item) => item.code == e)?.children || [];
    },
    //选择市
    cityChange(e) {
      this.form.areaCode = undefined;
      this.areaSource =
        this.citySource.find((item) => item.code == e)?.children || [];
    },

    //预览项目图片
    previewImg(item) {},

    //删除项目图片
    deleteImg() {
      this.imgs = [];
      this.form.proImage = "";
    },

    //项目图片上传
    beforeUploadPic(file) {
      let _this = this;
      return new Promise((resolve, reject) => {
        let filereader = new FileReader();
        filereader.onload = (e) => {
          let src = e.target.result;
          const image = new Image();
          image.onload = function () {
            resolve();
          };
          image.onerror = reject;
          image.src = src;
          _this.imgs.push({ url: image.src, file: file });
          //调用文件上传接口
          let formdata = new FormData();
          formdata.append("uploadFile", file);
          userCenterFile(formdata)
            .then((res) => {
              let { data } = res;
              this.form.proImage = data?.result?.fileId || "";
            })
            .catch((_) => {
              this.form.proImage = "";
            });
        };
        filereader.readAsDataURL(file);
        return false;
      });
    },

    //初始化地图
    initMap(geox = "", geoy = "") {
      mapInstance = new AMap.Map("project-map", {
        zoom: 15,
        center: [
          geox ? geox : getProInitGeo()?.[0],
          geoy ? geoy : getProInitGeo()?.[1],
        ],
      });
      if (geox && geoy) {
        this.addMapMarker(new AMap.LngLat(geox, geoy));
      }
      mapInstance.on("click", async (e) => {
        this.form.geox = e.lnglat.lng; //经度
        this.form.geoy = e.lnglat.lat; //纬度
        this.addMapMarker(e.lnglat);
      });
    },

    //地图搜索
    serachMap() {
      var that = this;
      if (that.map.type == 2) {
        if (!that.map.geox || !that.map.geoy) return;
        that.addMapMarker(new AMap.LngLat(that.map.geox, that.map.geoy));
        mapInstance.setCenter([that.map.geox, that.map.geoy]);
        that.form.geox = that.map.geox;
        that.form.geoy = that.map.geoy;
        return;
      }
      if (!that.map.keyWord) return;
      mapInstance.plugin(["AMap.PlaceSearch"], function () {
        var placeSearch = new AMap.PlaceSearch({
          city: "全国",
          autoFitView: true,
        });
        placeSearch.search(that.map.keyWord, async function (status, result) {
          if (status == "complete") {
            if (result.poiList.pois.length == 0) {
              return;
            }
            that.addMapMarker(result.poiList.pois[0].location);
            that.form.geox = result.poiList.pois[0].location.lng;
            that.form.geoy = result.poiList.pois[0].location.lat;
          }
          mapInstance.setFitView();
        });
      });
    },

    //添加自定义点标记
    addMapMarker(LngLat) {
      if (this.map.marker) {
        mapInstance.remove(this.map.marker);
      }
      this.map.marker = new AMap.Marker({
        position: LngLat,
      });
      mapInstance.add(this.map.marker);
    },

    //判断维结束时间大于完工时间
    disabledStartDate(current) {
      if (this.form.startDateStr == null && this.form.endDateStr == null) {
        return;
      }
      return current >= moment(this.form.endDateStr).endOf("day");
    },
    disabledEndDate(current) {
      if (this.form.startDateStr == null && this.form.endDateStr == null) {
        return;
      }
      return current <= moment(this.form.startDateStr).endOf("day");
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
    //重置表单
    resetForm() {
      this.imgs = [];
      this.picList = [];
      this.form = {
        //租户编码
        tenantCode: "",
        //租户名称
        tenantName: "",
        //租户类型
        tenantTypeValue: undefined,
        //超管账号
        tenantSuperAccount: undefined,
        //项目编码
        proCode: "",
        //项目名称
        proName: "",
        //项目所在地
        provinceCode: undefined,
        cityCode: undefined,
        areaCode: undefined,
        //开工日期
        startDateStr: "",
        //完工日期
        endDateStr: "",
        //项目类型
        proType: undefined,
        //工程类型
        engType: undefined,
        //公路类型
        roadType: undefined,
        //道路等级
        roadGrade: undefined,
        //建设里程
        roadKm: "",
        //投资规模
        roadMoney: "",
        //X坐标
        geox: "",
        //Y坐标
        geoy: "",
        //项目简介
        introduction: "",
        //包含系统
        includeSystem: undefined,
        //项目负责人
        contacts: "",
        //手机号
        contactsPhone: "",
        //项目图片
        proImage: "",
        //排序
        sort: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px 60px 20px 40px;
    max-height: 620px;
    .custom-scrollbar();
  }
  .curve-modal-footer {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    .flex();
    .ant-form-item-label {
      flex-shrink: 0;
      width: 102px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  .map-container {
    width: 100%;
    height: 340px;
    position: relative;
    .box-sizing();
    border: 2px solid #fff;
    border-radius: 4px;
    .search-wrap {
      width: 351px;
      position: absolute;
      left: 10px;
      top: 10px;
      right: 10px;
      background: #ffffff;
      box-shadow: 0px 2px 3px 0px rgba(93, 93, 93, 0.34);
      border-radius: 4px;
      padding: 0 16px 12px;
    }
    .input-container {
      width: 100%;
      height: 30px;
      border-radius: 4px;
      overflow: hidden;
      background: #ffffff;

      .flex();
      .input-body {
        flex: 1;
        border: 1px solid #d4d7d8;
        border-radius: 4px 0px 0px 4px;
        .flex();
      }
      .ant-input {
        flex: 1;
        height: 28px;
        border-radius: 0;
        border: 0;
        margin: 0;
      }
      .ant-input:focus {
        box-shadow: 0 0 0;
      }
      .search {
        width: 60px;
        height: 30px;
        background: rgb(49, 131, 255);
        border: 1px solid rgb(49, 131, 255);
        border-radius: 0px 4px 4px 0px;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    #project-map {
      height: 100%;
      width: 100%;
    }
  }
}
//上传图片
.picture-img {
  img {
    margin-right: 24px;
    width: 168px;
    height: 162px;
    border-radius: 2px;
    object-fit: cover;
  }
  /deep/.ant-upload-picture-card-wrapper {
    width: 168px;
    height: 162px;
    .ant-upload.ant-upload-select-picture-card {
      width: 168px;
      height: 162px;
    }
  }
  .card {
    width: 168px;
    height: 162px;
    background: #f8f9fb;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    position: relative;
    margin-top: 10px;
    .colse {
      width: 26px;
      height: 26px;
      background: #fff;
      border-radius: 50%;
      z-index: 999;
      position: absolute;
      top: -13px;
      right: -13px;
      .del-icon {
        color: #ff6565;
        font-size: 26px;
      }
    }
  }
}
</style>
